{extend name="layout/layout" /}

{block name="navbar"}{/block}
{if condition="session('source')"}
{block name="header"}{/block}
{/if}
{block name="style"}
<style>
	.mui-table-view .mui-media-object{
		max-width: 100px;
		height: 100px;
	}
	
	.types{
		margin-top: 20px;
	}
	
	.icon-container{
		margin-right: 10px;
	}
	
	.icon-container .iconfont{
		font-size: 40px;
		color: #e60012;
	}
	
	.types .mui-table-view-cell{
		padding: 15px;
	}
</style>
{/block}

{block name="main"}
	<div class="select-type" v-cloak>
		<div class="goods">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" :src="goods.original_image">
						<div class="mui-media-body">
							<p class="mui-ellipsis-2">{{goods.goods_name}}</p>
							<p class='mui-ellipsis' v-if="goods.spec_name">{{goods.spec_name}}</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<div class="types">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for="item in types">
					<a class="mui-navigate-right mui-row" @tap.prevent="select_type(item)">
						<div class="icon-container mui-pull-left">
							<i class="mui-icon iconfont" :class="item.icon_class"></i>
						</div>
						
						<div class="type-info mui-pull-left">
							<div class="type-name">{{item.title}}</div>
							<p class="type-tips">{{item.tips}}</p>
						</div>
						<span class="mui-clearfix"></span>
					</a>
				</li>
			</ul>
		</div>
	</div>
{/block}
{block name="script"}
<script>
	var new_vue = new Vue({
		el: '.select-type',
		data: {
			get_datas: {$datas},
            goods:'',
			after_type: '',
			types: [
				{id:1, title: '仅退款', tips:'未收到货(包含未签收)，或卖家协商同意前提下', icon_class:'icon-tuikuantuihuo'},
                {id:2, title: '退货退款', tips:'已收到货,需要退换已收到的货物', icon_class:'icon-servicewuyoutuihuanhuo1'},
            ],
		},
		mounted: function(){
			this.check_status();
		},
		methods: {
			//检查订单商品状态
			check_status: function(){
			    var that = this;
			    request(that, {'url': 'after_sales/check', 'data': {'order_id': that.get_datas.order_id, 'item_id': that.get_datas.item_id}}, function(res){
			        if(res.code == 200){
			            that.goods = res.data.goods;
			            if(that.goods.shipping_status == 2) {
			                that.types.push(
                                {id:3, title: '换货', tips:'已收到货,需要更换已收到的货', icon_class:'icon-quannianbaohuan'}
			                );
			            }
			        } else if(res.code == 201) {
			            //存在示完成售后，到售后详情
			            location.href = '/mobile/aftersales/detail/id/'+res.data.id;
			        } else {
			            mui.alert(res.msg, '提示', function(){
			                mui.back();
			            })
			        }
			    },function(err){
                    mui.alert(err.body.msg, '提示', function(){
                        mui.back();
                    })
			    })
			},
			//选择售后类型
            select_type: function(item) {
			    var datas = this.get_datas;
			    location.href = '/mobile/aftersales/apply/order_id/'+datas.order_id+'/item_id/'+datas.item_id+'/after_type/'+item.id;
            }
		}
	});
</script>
{/block}
